<template>
	<view class="warning">
		<view class="">
			<u-tabs :list="buttonList" name="label" :is-scroll="false" :bold="false"
				inactive-color="rgba(61, 61, 61, 0.5)" :current="current" @change="change"></u-tabs>
		</view>
		<view class="content">
			<view class="dis-flex  flex-x-between">
				<view class="search" style="width: 85%;">
					<input class="input" v-model="cameraName" @confirm="searching" type="text" auto-blur
						placeholder="请输入摄像头名称查询">
					<u-icon class="search-icon" size="40" color="rgba(61, 61, 61, 0.5)" name="search" />
					</input>
				</view>
				<view class="dis-flex flex-y-center flex-x-center time" @click="onShowDatePicker('range')">
					<image style="width: 35rpx;height: 35rpx;" src="../../../static/imags/home/icon1.png" mode=""
						v-if="!showPicker">
					</image>
					<image style="width: 35rpx;height: 35rpx;" src="../../../static/imags/home/icon2.png" mode=""
						v-else>
					</image>
				</view>
			</view>
			<view class="m-top20">
				<u-table>
					<u-tr>
						<u-th>风险等级</u-th>
						<u-th>识别项</u-th>
						<u-th>位置</u-th>
						<u-th>时间</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in warningList" :key="item.id">
						<u-td class="">
							<view class="dis-flex flex-y-center flex-x-center">
								<view class="dot" :style="{backgroundColor:dynamicColor(item.state)}">
								</view>
								<view class="m-l-10 f-24">
									{{dynamicText(item.state)}}
								</view>
							</view>
						</u-td>
						<u-td class="f-24">{{item.alertType}}</u-td>
						<u-td class="f-24">{{item.boxAddress}}</u-td>
						<u-td class="w-b-a">
							<text class="f-20">{{item.createTime}}</text>
						</u-td>
						<!-- <u-td><u-button size="mini" @click="lookImg(item.warningPicture)">查看</u-button></u-td> -->
						<u-td class="dis-flex flex-x-center">
							<view class="" @click="lookImg(index)">
								<u-icon :name="item.imgShow ? 'eye-fill' : 'eye'" size="35" />
							</view>
						</u-td>
					</u-tr>
				</u-table>
				<view class="dis-flex flex-x-center" style="height: 300rpx;" v-if="warningList.length <= 0">
					<u-empty text="没有预警信息" mode="data"></u-empty>
				</view>
				<view class="loadmore" v-else>
					<u-loadmore @loadmore="loadmore" :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
		</view>

		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始时间'"
			:end-text="'结束时间'" :show-seconds="true" @confirm="ed" @cancel="ed" />

		<u-popup v-model="imgShow" mode="center" @close="closePopup">
			<view style="width: 500rpx;height: 280rpx;">
				<u-image width="100%" height="100%" :fade="true" duration="450" mode="widthFix" :src="imgUrl"><u-loading
						slot="loading"></u-loading></u-image>
			</view>
		</u-popup>

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" tips="顶部" duration="200" :custom-style="customStyle" :icon-style="iconStyle"
			icon="arrow-up"></u-back-top>

		<!-- 加载动画 -->
		<u-page-loading v-if="loading" />
	</view>
</template>

<script>
	import * as home from '@/api/home.js'
	import * as dictionary from '@/api/dictionary.js'
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue'
	export default {
		components: {
			MxDatePicker,
		},
		data() {
			return {
				loading: false, // 加载状态
				buttonList: [], // 筛选按钮列表
				current: 0, // 赛选按钮当前选择状态
				imgShow: false, // 图片显示状态
				imgUrl: '', // 查看图片地址
				showPicker: false, // 时间选择器显示状态
				// range: ['2024/01/01', '2024/1/06'], // 初始时间
				type: 'range',
				cameraName: undefined, // 筛选框内容
				warningParams: { // 预警列表分页对象
					pageSize: 20,
					pageNum: 1,

				},
				queryStatus: false, // 查询状态
				loadMoreStatus: false, // 加载更多状态
				totalPageNum: undefined, // 分页总页数
				warningItemIndex: 0,
				warningList: [], // 预警列表
				status: 'loadmore', // 加载更多状态
				iconType: 'flower',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				customStyle: {
					fontSize: '32rpx',
					color: '#2979ff',
					backgroundColor: '#A0CFFF',
				}
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad() {
			await this.getWarningDictList()
		},
		// 监听用户下拉刷新动作
		async onPullDownRefresh() {
			await this.getWarningDictList()
		},
		methods: {
			// 查询
			getwarningListPage(state) {
				this.loading = true
				this.status = 'loading'
				if (this.loadMoreStatus) { // 加载更多走这

				} else { // 按钮切换走这
					this.warningParams.pageNum = 1 // 重置当前页数
					this.totalPageNum = undefined // 重置总页数
					this.warningList = [] // 只要点击上面筛选按钮就重置列表
					if (!!state) { // 判断是否是按钮切换类型
						this.warningParams.state = state
						this.operationFormData()
					} else if (this.queryStatus) { // 判断是否是输入框或者时间段赛选

					} else { // 查询全部走这
						delete this.warningParams.state
						this.operationFormData()
					}
				}

				if (this.warningParams.pageNum >= this.totalPageNum) return; // 超出总页数返回

				home.getwarningListPage({
					...this.warningParams
				}).then(res => {
					this.loadMoreStatus = false // 重置加载更多状态
					this.queryStatus = false // 重置加载查询状态
					this.warningParams.pageNum = ++this.warningParams.pageNum; // 每次请求页数加一
					res.data.pages == 0 ? this.totalPageNum = undefined : this.totalPageNum = res.data
						.pages // 查询出列表页数为0重置总页数否则赋值
					if (this.warningParams.pageNum >= res.data.pages) this.status =
						'nomore' // 等同于总页数时设置为没有数据
					else this.status = 'loadmore' // 否则可继续加载页面
					res.data.records.forEach(item => {
						this.warningList.push({
							...item,
							imgShow: false
						})
					})
				}).catch((error) => {
					console.log(error);
				}).finally(() => {
					setTimeout(() => {
						this.loading = false
					}, 500)
					uni.stopPullDownRefresh(); //停止刷新
				})
			},
			// 删除或者重置查询表单中的有些数据
			operationFormData() {
				delete this.warningParams.startTime
				delete this.warningParams.endTime
				delete this.warningParams.cameraName
				this.cameraName = undefined
			},
			// 获取上方筛选按钮
			getWarningDictList() {
				this.cameraName = ''
				delete this.warningParams.cameraName
				dictionary.getWarningDictList({
					page: 1,
					pageSize: 20,
					code: 'state'
				}).then(res => {
					this.buttonList = [{
						label: "全部预警",
						value: false
					}]
					res.data.items.forEach(item => {
						this.buttonList.push({
							label: item.label,
							value: item.value
						})
					})
					this.getwarningListPage()
				}).catch((error) => {})
			},
			// 顶部按钮筛选
			change(index) {
				this.getwarningListPage(this.buttonList[index].value)
				this.current = index;
			},
			// 输入框查询
			searching() {
				this.warningParams.cameraName = this.cameraName
				this.getwarningListPage()
				this.queryStatus = true
			},
			// 显示隐藏时间范围筛选
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择 || 取消
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					this.warningParams.startTime = this.replaceAll(e.value[0], '/', '-')
					this.warningParams.endTime = this.replaceAll(e.value[1], '/', '-')
					this.queryStatus = true
					this.getwarningListPage()
					//选择的值
					// console.log('value => ' + e.value);
					// //原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			// 字符串替换方法
			replaceAll(str, find, replace) {
				return str.replace(new RegExp(find, 'g'), replace);
			},

			dynamicText(type) {
				let text = (type == 'A' && '高风险') || (type == 'B' && '中风险') || (type == 'C' && '低风险') ||
					''
				return text
			},
			dynamicColor(type) {
				let color = (type == 'A' && 'rgba(212, 0, 0, 1)') || (type == 'B' && 'rgba(255, 132, 0, 1)') || (type ==
						'C' && 'rgba(0, 140, 255, 1)') ||
					'#f5f5f5'
				return color
			},
			// 查看图片
			lookImg(index) {
				let urls = []
				urls.push(this.warningList[index].warningPicture)
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: urls,
				})
				// this.imgShow = true
				// this.warningList[index].imgShow = true
				// this.imgUrl = this.warningList[index].warningPicture
				// this.warningItemIndex = index
			},
			// 关闭图片展示弹窗回调
			closePopup() {
				this.warningList[this.warningItemIndex].imgShow = false
			},
			// 上拉加载更多
			loadmore() {
				this.loadMoreStatus = true
				this.getwarningListPage()
			}
		}
	}
</script>

<style scoped lang="scss">
	.warning {

		.content {
			padding: 20rpx 30rpx;

			.time {
				padding: 25rpx;
				border-radius: 6rpx;
				background: rgba(237, 237, 237, 1);
			}



			.search {
				position: relative;

				.input {
					background: rgba(237, 237, 237, 1);
					height: 100%;
					padding-left: 70rpx;
					border-radius: 6rpx;
				}

				.search-icon {
					position: absolute;
					top: 25rpx;
					left: 20rpx;
				}
			}

			.dot {
				width: 25rpx;
				height: 25rpx;
				border-radius: 50%;
			}
		}

		.loadmore {
			padding: 60rpx;
		}
	}
</style>